<template>
  <van-popup
    v-model:show="state.show"
    position="bottom"
    round
    :style="{ height: '46%' }"
  >
    <van-date-picker
    v-model="currentDate"
      title="选择年月"
      @confirm="choseMonth"
      @cancel="monthToggle"
      :columns-type="columnsType"
    />
  </van-popup>
</template>

<script setup lang="ts">
  import { reactive, defineProps,defineEmits,defineExpose,ref} from "vue";
  import dayjs from "dayjs";

  defineProps<{select:Function}>()
  const emits=defineEmits(["select"])
  const columnsType = ['year', 'month'];
  const currentDate = ref(['2024','01']);
      const state = reactive({
        show: false,
        active: new Date(),
      });
      


      const monthToggle = () => {
        state.show = !state.show;
      };
 
      const choseMonth = (item) => {
        state.active = item;
        state.show = false;
         emits("select", dayjs( currentDate.value).format("YYYY-MM"));
      };

     
      defineExpose({
        choseMonth,
        monthToggle,
        state,
        currentDate 
      })
      
    
</script>